<template>
    <div class="borther">
      <!-- 使用 v-for 指令循环渲染菜单列表 -->
      <div
        v-for="(item, index) in menuList"
        :key="index"
        :class="{ 'active_item ball': isFlag, ball: !isFlag }"
        @click="tabFun(item, index)"
        @mouseenter="mousemove(item, index)"
        @mouseleave="mouseleave(item, index)"
      >
        <!-- 根据 active 状态动态显示图片 -->
        <img
          :src="active === index ? item.img2 : item.img"
          alt=""
          class="ball_img"
        />
        <p class="ball_title">{{ item.title }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  // 导入图片资源
  import img1 from "@/assets/image/重点车辆监管系统_nor.png";
  import img2 from "@/assets/image/重点车辆监管系统_hov.png";
  import img3 from "@/assets/image/非机动车未带头盔识别系统_nor.png";
  import img4 from "@/assets/image/非机动车未带头盔识别系统_hov.png";
  import img5 from "@/assets/image/交通安全画像系统_nor.png";
  import img6 from "@/assets/image/交通安全画像系统_hov.png";
  import img7 from "@/assets/image/交通态势监控系统_nor.png";
  import img8 from "@/assets/image/交通态势监控系统_hov.png";
  import img9 from "@/assets/image/可视化作战平台_nor.png";
  import img10 from "@/assets/image/可视化作战平台_hov.png";
  import img11 from "@/assets/image/停车卡口接入系统_nor.png";
  import img12 from "@/assets/image/停车卡口接入系统_hov.png";
  
  // 定义菜单列表
  const menuList = [
    {
      url: "",
      img: img1,
      img2: img2,
      title: "重点车辆监管系统",
    },
    {
      url: "",
      img: img3,
      img2: img4,
      title: "非机动车未带头盔识别系统",
    },
    {
      url: "",
      img: img5,
      img2: img6,
      title: "交通安全画像系统",
    },
    {
      url: "",
      img: img7,
      img2: img8,
      title: "交通态势监控系统",
    },
    {
      url: "",
      img: img9,
      img2: img10,
      title: "可视化作战平台",
    },
    {
      url: "",
      img: img11,
      img2: img12,
      title: "停车卡口接入系统",
    },
  ];
  
  // 创建响应式数据
  const active = ref(9);
  const isFlag = ref(false);
  
  // 鼠标移入事件处理函数
  const mousemove = (v, i) => {
    isFlag.value = true;
    active.value = i;
  };
  
  // 鼠标移出事件处理函数
  const mouseleave = (v, i) => {
    isFlag.value = false;
    active.value = 8;
  };
  
  // 点击事件处理函数
  const tabFun = (v, i) => {
    console.log(`您点击了${v.title}`);
  };
  
  // 组件挂载后执行的操作
  onMounted(() => {
    const items = document.querySelectorAll(".ball");
    for (let i = 0; i < items.length; i++) {
      items[i].style["animation-delay"] = `-5 - 3.3 * ${i}s, -3.3 * ${i}s, -3.3 * ${i}s`;
    }
  });
  </script>
  
  <style scoped>
  /* 第一层动画 *//*第一层*/

@keyframes animX {
  0% {
    left: -80px;
  }

  100% {
    left: 500px;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }

  100% {
    top: 500px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);
    z-index: 0;
  }

  50% {
    transform: scale(1);
    z-index: 3;
  }

  100% {
    transform: scale(0.5);
    z-index: 0;
  }
}

.ball {
  display: flex;
  flex-direction: column;
  width: 305px;
  height: 155px;
  position: absolute;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  line-height: 120px;
  z-index: 3;
  /*动画执行一次所需时间*/
  animation-duration: 10s, 10s, 20s;
  /*动画以何种运行轨迹完成一个周期*/
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  /*动画播放次数,无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  animation-name: animX, animY, scale;
}
.ball_img {
  width: 200px;
  height: 200px;
  cursor: pointer;
}
.ball_title {
  color: white;
  font-size: 25px;
  width: 200px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.active_item {
  animation-play-state: paused;
}
  </style>